<template>
  <div class="yfht-search">
    <div ref="searchRef" class="yfht-search-container">
      <div class="yfht-search-form-body">
        <a-form ref="searchRef" v-bind="{ ...attrs }" layout="inline" labelAlign="right">
          <slot></slot>
        </a-form>
      </div>
      <div class="yfht-search-form-actions">
        <a-button  @click="submit" style="margin-left: 16px" type="primary" :disabled="!!searchDisable"> 查询 </a-button>
        <a-button @click="reset" style="margin-left: 8px">重置</a-button>
        <slot name="action"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref, onUnmounted, computed, useAttrs } from 'vue';

const emit = defineEmits<{
  (e: 'reset'): void;
  (e: 'submit'): void;
}>();

const props = defineProps<{
  searchDisable?: boolean;
  gutter?: number;
}>();

const searchRef: Ref<HTMLDivElement | null> = ref(null);

onMounted(() => {
  setActionFloatEffect();
  window.addEventListener('resize', setActionFloatEffect);
});

onUnmounted(() => {
  window.removeEventListener('resize', setActionFloatEffect);
});

const attrs = useAttrs();

function setActionFloatEffect() {
  setTimeout(() => {
    setActionFloat();
  }, 300);
}

function setActionFloat() {
  let styleProps:any,
    step:any,
    gutter = props.gutter || 20;
  if (!searchRef.value) return;
  let safeWidth = (document.querySelector('.yfht-search') as HTMLDivElement)?.offsetWidth || 0;
  const clientWidth = document.documentElement?.clientWidth || 0;
  if (clientWidth > 1200) {
    safeWidth = (safeWidth - 3 * gutter) / 4;
    step = 4;
  } else {
    safeWidth = (safeWidth - 2 * gutter) / 3;
    step = 3;
  }
  document.querySelectorAll('.yfht-search .ant-form-item')?.forEach((item, index) => {
    (item as HTMLDivElement).style.width = safeWidth + 'px';
    if (index % step != 0) {
      (item as HTMLDivElement).style.marginLeft = gutter + 'px';
    } else {
      (item as HTMLDivElement).style.marginLeft = '0px';
    }
  });
  const body: HTMLDivElement | null = (searchRef.value as HTMLDivElement).querySelector('.yfht-search-form-body');
  const action: HTMLDivElement | null = (searchRef.value as HTMLDivElement).querySelector('.yfht-search-form-actions');
  const children = body?.querySelector('.ant-form')?.children || [];
  const lastChild: HTMLDivElement = children[children.length - 1] as HTMLDivElement;
  const right = lastChild?.getBoundingClientRect()?.right;
  if (!body || !action || !lastChild) return;
  if (body.offsetHeight <= lastChild.offsetHeight + 8) {
    if (clientWidth - right <= safeWidth || ((children as any) || []).length % step > 2) {
      styleProps = { float: 'right' };
    } else {
      styleProps = { float: 'left' };
    }
  } else {
    if (clientWidth - right <= safeWidth) {
      if (((children as any) || []).length % step == 0) {
        styleProps = { float: 'right' };
      } else {
        styleProps = { float: 'left' };
      }
    } else {
      styleProps = {
        float: 'unset',
        position: 'absolute',
        bottom: '8px',
        right: '0px',
      };
    }
  }
  styleProps = { position: 'relative', bottom: 0, right: 0, ...styleProps };
  for (let key in styleProps) {
    action.style.setProperty(key, styleProps[key]);
  }
}

const reset = () => {
  emit('reset');
};
const submit = () => {
  emit('submit');
};
</script>

<style lang="less"  scoped>
.yfht-search {
  padding-bottom: 2px;
  background: #ffffff;
  position: relative;
  margin-left: -12px;
  margin-bottom: -8px;

  &::after {
    display: block;
    content: '';
    clear: both;
  }

  :deep(.ant-form-item) {
    float: left;
    margin-bottom: 8px;
    padding-left: 10px;
    box-sizing: border-box;
    margin-right: 0;
  }

  :deep(.ant-form-item-label) {
    margin-right: 5px;
    padding-left: 6px;
    width: 80px;
    overflow: hidden;

    > label {
      // justify-content:;
      &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
        margin-right: 4px;
        margin-left: -10px;
      }
    }
  }

  :deep(.ant-input),
  :deep(.ant-select) {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  :deep(.ant-picker-range) {
    width: 100%;
  }
}

.yfht-search-form-body {
  display: inline-block;
  clear: left;
  overflow: hidden;
  float: left;
}

.yfht-search-form-actions {
  float: right;
  white-space: nowrap;
  display: inline-block;
}
</style>
